<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    #app{margin: 50px auto;width: 600px;}
    fieldset{border: 1px solid purple;margin-bottom: 20px;}
    fieldset input{width: 200px;height: 30px;margin: 10px 0;}
    table{width: 600px;border: 2px solid purple;text-align: center;}
    thead{background-color: purple;color: #fff;}
  </style>
</head>
<body>
  <div id="app">
    <!--上部分-->
    <fieldset>
      <legend>撩课信息录入系统(Vue版)</legend>
      <div>
        <label>姓名:<input type="text" placeholder="请输入姓名" v-model.trim="newPerson.name" /></label>
      </div>
      <div>
        <label>年龄:<input type="text" placeholder="请输入年龄"  v-model.trim="newPerson.age"/></label>
      </div>
      <div>
        <label>
          性别:
          <select v-model="newPerson.sex">
            <option value="男">男</option>
            <option value="女">女</option>
          </select>
        </label>
      </div>
      <div>
        <label>手机:<input type="text" placeholder="请输入手机号码" v-model.trim="newPerson.phone"/></label>
      </div>
      <button @click="addNewP">创建新用户</button>
    </fieldset>
    <!--下部分-->
    <table>
      <thead>
        <tr>
          <td>姓名</td>
          <td>性别</td>
          <td>年龄</td>
          <td>手机</td>
          <td>删除</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(p, index) in persons">
          <td>{{p.name}}</td>
          <td>{{p.sex}}</td>
          <td>{{p.age}}</td>
          <td>{{p.phone}}</td>
          <td>
            <button @click="delP(index)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <script src="js/vue.js"></script>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          persons: [
            {name: '张三', age: 20, sex: '男', phone: '18919988999'},
            {name: '李四', age: 30, sex: '女', phone: '18912121212'},
            {name: '王五', age: 40, sex: '男', phone: '18912222229'},
            {name: '赵六', age: 10, sex: '女', phone: '18921218999'}
          ],
          newPerson: {name: '', age: '', sex: '男', phone: ''}
        }
      },
      methods:{
        // 删除一个记录
        delP(index){
           this.persons.splice(index, 1);
        },
        // 添加一条记录
        addNewP(){
           const {name, age, sex, phone} = this.newPerson;
           // console.log(name, age, sex, phone);
           // 1. 判断
          if(!name || !age || !sex || !phone){
             alert('输入的内容不完整!');
             return;
          }

          // 2. 插入一条数据
          this.persons.unshift(this.newPerson);

          // 3. 清空数据
          this.newPerson = {name: '', age: '', sex: '男', phone: ''};

        }
      }
    }).mount('#app');
  </script>
</body>
</html>
